<template>

    <div class="left">
        <!-- 以后可能会增加 -->
        <!-- <div class="tabButton">
            <div class="tabLeft">
                新增角色组
            </div>
            <div class="tabright" >
                新增角色
            </div>
        </div> -->
        <div class="treeBox">
            <div class="tree" v-for="(item,index) in list" :key='index'>
                <div class="treeTitle">
                    <div class="titleImg" @click="treeShowClick(index)" :class="{cursorNo:list[index].child.length == 0}">
                        <span class="open" v-show="item.show"></span>
                        <span class="close" v-show="!item.show"></span>
                    </div>
                    <div class="treeName">{{item.value}}</div>
                    <div class="addButton" @click="addroleClick(index)" v-if='item.value != "默认"'>+</div>
                    <div class="editButton" @click="editClick(index)" v-if='item.operation'></div>
                </div>
                <div v-show="item.show" :class="{childName:true,childOk:iten.show}" v-for="(iten,ind) in item.child" :key='ind' @click="childClick(index,ind)">
                    {{iten.value}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    export default {
        data() {
            return {
                list: [
                    // {
                    //     value: '默认',
                    //     show: false,    //打开/关闭
                    //     operation: false,    //编辑权限
                    //     child: [
                    //         { value: '肖肖的烦心事', show: false },
                    //         { value: '梦梦的小胡子', show: false },
                    //         { value: '晓聪的小镜子', show: false },
                    //         { value: '喵喵的大长腿', show: false }
                    //     ]
                    // },
                    // {
                    //     value: '职位',
                    //     show: true,
                    //     operation: false,
                    //     child: [
                    //         { value: '肖肖的烦心事', show: true },
                    //         { value: '梦梦的小胡子', show: false },
                    //         { value: '晓聪的小镜子', show: false },
                    //         { value: '喵喵的大长腿', show: false }
                    //     ]
                    // },
                ],
                childIndex: '',
                childInd: '',
            };
        },
        created: function () {
            var self = this
            self.getLabelList('created')
        },
        mounted() {
            var self = this
            mapFun.$on('roleFun', () => {
            })
            mapFun.$on('addReoleFun', () => {   //新增职位角色
                self.getLabelList('edit', 0, 0)
            })
            mapFun.$on('editRoleFun', () => {   //编辑职位角色
                self.getLabelList('edit', self.childIndex, self.childInd)
            })
            mapFun.$on('deleteRoleFun', () => {   //删除职位角色
                self.getLabelList('edit', 0, 0)
            })
        },
        methods: {
            getLabelList(str, m = 0, n = 0) {
                var self = this
                self.getapiorgLabelValueList({
                    companyId: sessionStorage.getItem("ORGID"),
                    labelType: 1,
                }).then(data => {
                    if (data.statusCode == 200) {
                        if (data.data) {
                            self.list = [
                                {
                                    value: '职位',
                                    show: data.data.length > 0 ? true : false,  //是否展开
                                    operation: false,
                                    child: []
                                },
                            ]
                            data.data.forEach(ele => {
                                self.list[0].child.push({
                                    show: false,
                                    id: ele.id ? ele.id : '',
                                    isEdit: ele.isEdit || ele.isEdit == 0 ? ele.isEdit : 1,    //编辑权限 0-可以编辑 1-不可以
                                    value: ele.value ? ele.value : ''
                                })
                            });
                            if (str == 'created') {
                                self.childClick(m, n)
                            } else if (str == 'edit') {
                                self.childClick(m, n)
                            }
                        } else {
                            self.list = [
                                {
                                    value: '职位',
                                    show: false,
                                    operation: false,
                                    child: []
                                },
                            ]
                            mapFun.$emit('childDeleteClickFun')
                        }
                    } else {
                        self.$message(data.statusMessage)
                    }
                }).catch(msg => {
                    this.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                })
            },
            //展开与关闭
            treeShowClick(index) {
                if (this.list[index].child.length > 0) {
                    this.list[index].show = !this.list[index].show
                }
            },
            //角色选择
            childClick(index, ind) {
                let self = this
                if (self.list.length > 0) {
                    self.childIndex = index
                    self.childInd = ind
                    for (let i = 0; i < self.list.length; i++) {
                        for (let j = 0; j < self.list[i].child.length; j++) {
                            self.list[i].child[j].show = false
                        }
                    }
                    self.list[index].child[ind].show = true
                    mapFun.$emit('childClickFun', self.list[index].child[ind], index, ind)
                }
            },
            //添加角色
            addroleClick(index) {
                mapFun.$emit('addroleLeftFun', this.list[index])
            },
            //编辑角色组
            editClick(index) {
                // mapFun.$emit('', this.list[index])
            },
            ...mapActions(["getapiorgLabelValueList"])
        }
    };
</script>
<style scoped>
    .left {
        width: 249px;
    }

    .tabButton {
        display: flex;
        padding-left: 23px;
        margin-top: -10px;
    }

    .tabButton>div {
        width: 70px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        margin: 0 16px;
        border-radius: 4px;
        background: white;
        border: 1px solid #ccc;
        cursor: pointer;
        font-size: 12px;
    }

    .treeBox {
        width: 249px;
        margin-top: 24px;
    }

    .tree {
        margin-left: 5px;
    }

    .treeTitle {
        display: flex;
        height: 32px;
        line-height: 32px;
    }

    .titleImg {
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

    .open {
        width: 32px;
        height: 32px;
        display: inline-block;
        background: url('/static/img/arrowsB.jpg')8px 50% no-repeat;
    }

    .close {
        width: 32px;
        height: 32px;
        display: inline-block;
        background: url('/static/img/arrowsR.jpg') 8px 50% no-repeat;

    }

    .treeName {
        width: 160px;
        height: 32px;
        line-height: 32px;
        font-size: 15px;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .addButton,
    .editButton {
        width: 32px;
        height: 32px;
        font-size: 24px;
        line-height: 28px;
        cursor: pointer;
    }

    .editButton {
        background: url('/static/img/编辑.png') 0px 50% no-repeat;
        background-size: 60%;
    }

    .childName {
        width: 160px;
        height: 32px;
        padding-left: 5px;
        line-height: 32px;
        font-size: 15px;
        margin-left: 43px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .childName:hover {
        color: #38adff;
    }

    .childOk {
        background: #38adff !important;
        color: white !important;
    }

    .cursorNo {
        cursor: no-drop;
    }
</style>